<template>
    <div class="result-container">
        <div class="result-bg-img">
            <el-image :src="dynamicImg" />
        </div>
        <h1 style="color:rgb(107, 107, 107);font-size:50px">{{ type }}</h1>
        <h1 style="color:rgb(107, 107, 107)">{{ title }}</h1>
        <span style="color:rgb(107, 107, 107);font-szie:10px">{{ tip }}</span>

        <slot />
    </div>
</template>
<script>
import Vue from 'vue';

export default Vue.extend({
    name: 'Result',
    props: {
        bgUrl: {
            type: String,
            default: '',
        },
        title: {
            type: String,
            default: '',
        },
        tip: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: '',
        },
    },
    computed: {
        dynamicImg() {
            switch (this.type) {
                case '403':
                    return require('@/assets/result/assets-result-403.svg');
                case '404':
                    return require('@/assets/result/assets-result-404.svg');
                case '500':
                    return require('@/assets/result/assets-result-500.svg');
                case 'Network Error':
                    return require('@/assets/result/assets-result-wifi.svg');
            }
        },
    },
});
</script>
<style lang="less" scoped>
@import '@/style/variables';

.result {
    &-container {
        min-height: 400px;
        height: 75vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }
}
</style>